<template>
  <view class="land-container">
    <view class="header">
      <text class="iconfont icon-back" @click="goBack"></text>
      <text class="title">地块管理</text>
      <text class="action" @click="showManagement">管理</text>
    </view>
    
    <view class="block-selector">
      <view class="selector-title">选择地块</view>
      <view class="block-tabs">
        <view class="block-tab" 
              :class="{active: activeBlock === 'all'}" 
              @click="selectBlock('all')">
          <text class="tab-text">全部地块</text>
          <text class="tab-count">{{landInfo.blocks.reduce((sum, block) => sum + block.plotCount, 0)}}</text>
        </view>
        <view class="block-tab" 
              v-for="block in landInfo.blocks" 
              :key="block.id"
              :class="{active: activeBlock === block.id}" 
              @click="selectBlock(block.id)">
          <text class="tab-text">{{block.name}}</text>
          <text class="tab-count">{{block.plotCount}}</text>
        </view>
      </view>
    </view>
    
    <view class="current-crops">
      <view class="section-title">当前种植作物</view>
      <view class="crop-info">
        <view class="crop-name-info">
          <text class="crop-name">{{cropInfo.current.name}}</text>
          <text class="crop-variety">品种: {{cropInfo.current.variety}}</text>
        </view>
        <view class="crop-date-info">
          <text class="plant-date">{{formatDate(cropInfo.current.plantDate)}}</text>
          <text class="plant-area">种植面积: {{cropInfo.current.area}}亩</text>
        </view>
      </view>
      
      <view class="statistics">
        <view class="stat-title">生产统计</view>
        <view class="stat-panel">
          <view class="stat-header">用种量统计</view>
          <view class="stat-content">
            <view class="stat-row" v-for="(item, index) in cropInfo.statistics.seedUsage" :key="index">
              <text class="stat-label" v-if="item.name">{{item.name}}</text>
              <text class="stat-label" v-else>总计</text>
              <text class="stat-value">{{item.amount}} {{item.unit}}</text>
            </view>
          </view>
        </view>
        
        <view class="stat-panel">
          <view class="stat-header">用药量统计</view>
          <view class="stat-content">
            <view class="stat-row" v-for="(item, index) in cropInfo.statistics.pesticideUsage" :key="index">
              <text class="stat-label" v-if="item.name">{{item.name}}</text>
              <text class="stat-label" v-else>总计</text>
              <text class="stat-value">{{item.amount}} {{item.unit}}</text>
            </view>
          </view>
        </view>
        
        <view class="stat-panel">
          <view class="stat-header">用肥量统计</view>
          <view class="stat-content">
            <view class="stat-row" v-for="(item, index) in cropInfo.statistics.fertilizerUsage" :key="index">
              <text class="stat-label" v-if="item.name">{{item.name}}</text>
              <text class="stat-label" v-else>总计</text>
              <text class="stat-value">{{item.amount}} {{item.unit}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="farm-records">
      <view class="section-title">农事记录</view>
      <view class="record-list">
        <view class="record-item" v-for="(record, index) in farmingRecords" :key="index">
          <view class="record-icon" :class="{
            'seeding': record.type === '播种作业',
            'irrigation': record.type === '灌溉作业',
            'spray': record.type === '施药作业',
            'fertilizer': record.type === '施肥作业'
          }">
            <text class="iconfont" :class="{
              'icon-seeding': record.type === '播种作业',
              'icon-irrigation': record.type === '灌溉作业',
              'icon-spray': record.type === '施药作业',
              'icon-fertilizer': record.type === '施肥作业'
            }"></text>
          </view>
          <view class="record-content">
            <text class="record-type">{{record.type}}</text>
            <text class="record-date">{{record.date}}</text>
            <text class="record-desc">{{record.content}}</text>
            <view class="record-location">
              <text class="location-text">{{record.block}} · {{record.plot}}</text>
            </view>
          </view>
          <view class="record-actions">
            <text class="edit-icon">✎</text>
            <text class="delete-icon">🗑</text>
          </view>
        </view>
      </view>
      
      <view class="add-record">
        <text class="add-icon">+</text>
        <text class="add-text">加载更多记录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { landInfo, cropInfo, farmingRecords } from '@/utils/mockData.js';

export default {
  data() {
    return {
      landInfo,
      cropInfo,
      farmingRecords,
      activeBlock: 'all'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showManagement() {
      // 显示管理操作
      uni.showActionSheet({
        itemList: ['添加地块', '编辑地块', '删除地块'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 添加地块
            this.navigateTo('/pages/agriculture/landManagement/addLand');
          } else if (res.tapIndex === 1) {
            // 编辑地块
            this.navigateTo('/pages/agriculture/landManagement/editLand');
          } else if (res.tapIndex === 2) {
            // 删除地块
            uni.showModal({
              title: '提示',
              content: '确定要删除选中的地块吗？',
              success: (res) => {
                if (res.confirm) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                  });
                }
              }
            });
          }
        }
      });
    },
    selectBlock(blockId) {
      this.activeBlock = blockId;
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
}
</script>

<style lang="scss">
.land-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    height: 100rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 30rpx;
    position: relative;
    
    .icon-back {
      font-size: 40rpx;
      color: #333;
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }
    
    .action {
      font-size: 30rpx;
      color: #2EB57D;
    }
  }
  
  .block-selector {
    background-color: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    
    .selector-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .block-tabs {
      display: flex;
      flex-wrap: wrap;
      
      .block-tab {
        height: 70rpx;
        padding: 0 30rpx;
        background-color: #f5f5f5;
        border-radius: 35rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        
        &.active {
          background-color: #E8F5E9;
          
          .tab-text, .tab-count {
            color: #2EB57D;
          }
        }
        
        .tab-text {
          font-size: 28rpx;
          color: #666;
        }
        
        .tab-count {
          font-size: 24rpx;
          color: #999;
          margin-left: 10rpx;
          background-color: rgba(0,0,0,0.05);
          width: 40rpx;
          height: 40rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .current-crops {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .crop-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      
      .crop-name-info, .crop-date-info {
        display: flex;
        flex-direction: column;
      }
      
      .crop-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .crop-variety, .plant-date, .plant-area {
        font-size: 26rpx;
        color: #999;
      }
    }
    
    .statistics {
      .stat-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .stat-panel {
        margin-bottom: 20rpx;
        
        .stat-header {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 15rpx;
        }
        
        .stat-content {
          .stat-row {
            display: flex;
            justify-content: space-between;
            padding: 10rpx 0;
            
            .stat-label {
              font-size: 26rpx;
              color: #333;
            }
            
            .stat-value {
              font-size: 26rpx;
              color: #2EB57D;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
  
  .farm-records {
    background-color: #fff;
    padding: 30rpx;
    
    .record-list {
      .record-item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .record-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          
          &.seeding {
            background-color: #E8F5E9;
            
            .iconfont {
              color: #4CAF50;
            }
          }
          
          &.irrigation {
            background-color: #E3F2FD;
            
            .iconfont {
              color: #2196F3;
            }
          }
          
          &.spray {
            background-color: #FFF8E1;
            
            .iconfont {
              color: #FFC107;
            }
          }
          
          &.fertilizer {
            background-color: #F3E5F5;
            
            .iconfont {
              color: #9C27B0;
            }
          }
          
          .iconfont {
            font-size: 40rpx;
          }
        }
        
        .record-content {
          flex: 1;
          
          .record-type {
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 5rpx;
          }
          
          .record-date {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 10rpx;
          }
          
          .record-desc {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 10rpx;
            line-height: 1.5;
          }
          
          .record-location {
            display: inline-block;
            padding: 4rpx 15rpx;
            background-color: #f5f5f5;
            border-radius: 4rpx;
            
            .location-text {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
        
        .record-actions {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 10rpx;
          
          .edit-icon, .delete-icon {
            font-size: 36rpx;
            color: #ccc;
            margin: 10rpx 0;
          }
        }
      }
    }
    
    .add-record {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0;
      
      .add-icon {
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        background-color: #2EB57D;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        margin-right: 10rpx;
      }
      
      .add-text {
        font-size: 28rpx;
        color: #2EB57D;
      }
    }
  }
}
</style> 